<template>
    <div class="app-grid">
        <t-row v-for="(row, iid) in twoDimensional" :key="iid" class="app-row" align="start" justify="start">
            <t-col v-for="(col, jid) in row" :key="jid" @click="handleClick(col)" class="app-col">
                <div class="icon">
                    <t-icon :name="col.icon" />
                </div>
                <div class="name">
                    <div>{{ col.name }}</div>
                </div>

            </t-col>
        </t-row>

    </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next';
import { apps_name_mock } from '@/api/mock'
import type { AppItemType } from '@/types/menu'



const emit = defineEmits(['child-event'])
const apps = apps_name_mock;

const handleClick = (app: AppItemType) => {

    emit('child-event', app)
    MessagePlugin.success({
        content: `打开应用：${app.name}`
    })
}


function to2DArray<T>(arr: T[], cols = 3) {
    const result: T[][] = [];
    for (let i = 0; i < arr.length; i += cols) {
        result.push(arr.slice(i, i + cols));
    }
    return result;
}

const twoDimensional = to2DArray(apps, 6);
// console.log(twoDimensional);
</script>

<style scoped lang="scss">
.app-grid {
    padding: 20px;
    width: 340px;
    justify-content: center;
    // border: 2px solid #ac1919;
    // border-radius: 10px;

    .app-row {
        display: flex;

        .app-col {
            justify-content: center;
            margin: 4px 10px 2px 10px;

            .icon {
                display: flex;
                font-size: 24px;
                justify-content: center;
            }

            .name {
                display: flex;
                justify-content: center;
            }
        }
    }
}
</style>
